<template>
	<view class="container">
		<view>
			<h2>绑定手机</h2>
			<p class="password-form-sub">根据监管部门要求，用户需要进行手机号码验证，验证后平台将保护您的个人隐私不会泄露，不会使用您的手机号进行发短信和打电话！</p>
		</view>
     <form @submit="formSubmit">
		 <view class="login-form-input">
		     <img class="login-form-icon"
		         src="/static/image/icon_03.png" alt="手机号码">
				 <input
		         type="number" id="phone" maxlength="11" value=""
		         name="account" placeholder="请输手机号码"
				 v-model="formData.phone"
				  />
		 </view>
		 <view class="login-form-input login-form-code">
		     <img class="login-form-icon"
		         src="/static/image/icon_02.png" alt="验证码">
				 <input type="number" name="code" id="code" placeholder="请输入验证码" v-model="formData.code" />
			 <input type="hidden" name="__token__" id="token" v-model="formData.token" />
		     <button class="login-code-btn" type="button"
		         @click="getCode()">{{codeButtonText}}
			 </button>
		 </view>
		 <button class="password-form-btn" style="margin-top: 40px;"
		   @click="bindMobile()"
		     type="button">
		     <i class="icon icon-lock"></i>绑定
		 </button>
	 </form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					phone: '',
					code: '',
					token: ''
				},
				isCodeButtonDisabled: false,
				codeButtonText: '获取',
				countdown: 60,
				hdata: {},
				countdownTimer: null
			};
		},
		onLoad() {
			// 获取本地存储的数据
			// try {
			// 	const sharedData = uni.getStorageSync('sharedData');
			// 	if (sharedData) {
			// 		this.hdata = typeof sharedData === 'string' ? JSON.parse(sharedData) : sharedData;
			// 	}
			// } catch (e) {
			// 	console.error('获取sharedData失败', e);
			// }
			uni.setNavigationBarTitle({
				title: '绑定手机', 
			});
		},
		methods: {
			// 获取验证码
			getCode() {
				const phone = this.formData.phone;
				const token = this.formData.token;
				if (phone.length != 11) {
					uni.showToast({
						title: "请正确输入11位手机号码",
						icon: "none"
					});
					return;
				}
				
				this.isCodeButtonDisabled = true;
				this.startCountdown(); //这段测试用 后面可以注释掉 并放开return
				return;
				// 在此处请求验证码接口成功后调用以下计时器
				// 模拟API调用
				uni.request({
					url: '/miniApp/sendCode.nf',
					method: 'POST',
					data: {
						phone: phone,
						userId: this.hdata.userId,
						asdfg: this.hdata.asdfg
					},
					success: (res) => {
						const rst = res.data;
						if (rst.code == 0) {
							this.codeButtonText = this.countdown + 's后重新获取';
							uni.showToast({
								title: rst.msg,
								icon: "success"
							});
							
							// 开始倒计时
							this.startCountdown();
						} else if (rst.code == 1) {
							let msg = rst.msg;
							if (rst.msg == '-1') {
								msg = '同一IP当天不能超过10次';
							}
							if (rst.msg == '-2') {
								msg = '同一手机号当天不能超过10次';
							}
							if (rst.msg == '-3') {
								msg = '同一手机号发送间隔为1分钟';
							}
							
							uni.showToast({
								title: msg,
								icon: "none"
							});
							
							// 重置按钮状态
							this.isCodeButtonDisabled = false;
							this.codeButtonText = '获取';
							return false;
						}
					},
					fail: (err) => {
						console.error('获取验证码失败', err);
						uni.showToast({
							title: "获取验证码失败",
							icon: "none"
						});
						this.isCodeButtonDisabled = false;
					}
				});
			},
			
			// 开始倒计时
			startCountdown() {
				console.log('???');
				this.countdownTimer = setInterval(() => {
					this.countdown -= 1;
					this.codeButtonText = this.countdown + 's后重新获取';
					
					if (this.countdown <= 0) {
						this.isCodeButtonDisabled = false;
						this.codeButtonText = '重新获取';
						this.countdown = 60;
						clearInterval(this.countdownTimer);
					}
					console.log('???!!');
				}, 1000);
			},
			
			// 绑定手机号
			bindMobile() {
				const account = this.formData.phone;
				const code = this.formData.code;
				
				uni.request({
					url: '/miniApp/mobile_save.nf',
					method: 'POST',
					data: {
						phone: account,
						code: code,
						userId: this.hdata.userId,
					},
					success: (res) => {
						const rst = res.data;
						if (rst.code == 0) {
							uni.showToast({
								title: rst.msg,
								icon: "success"
							});
							
							// 延迟关闭页面
							setTimeout(() => {
								// 关闭当前页面，返回上一页
								uni.navigateBack();
							}, 1000);
							
							return false;
						} else {
							uni.showToast({
								title: rst.msg || "绑定失败",
								icon: "none"
							});
						}
					},
					fail: (err) => {
						console.error('绑定手机号失败', err);
						uni.showToast({
							title: "绑定手机号失败",
							icon: "none"
						});
					}
				});
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
			}
		}
	};
</script>

<style scoped>
	
	::v-deep uni-button:after {
	  border: none !important; 
	  background: transparent !important;
	}
	.container {
		background-color: #fff;
		min-height: 100vh;
		padding:20px 25px 30px 25px;
		font-size: 20px;
	}
	
	.password-form-sub{
		color: #4F4F4F;
		font-size: 12px;
		margin-bottom: 40px;
		margin-top: 20px;
		
	}
	
	.login-form-input {
	    position: relative;
	    background: #F5F5F5;
	    height: 44px;
	    border-radius: 22px;
	    margin-top: 15px;
	    padding-left: 44px;
	    overflow: hidden;
	}
	
	.login-form-input:first-child {
	    margin: 0;
	}
	
	.login-form-icon {
	    width: 16px;
	    height: 16px;
	    position: absolute;
	    top: 50%;
	    left: 14px;
	    margin-top: -8px;
	}
	
	.login-form-input input {
	    width: 100%;
	    height: 44px;
	    border: none;
	    padding: 0 15px 0 0;
	    margin: 0;
	    background: transparent;
	    outline: none;
	    font-size: 14px;
	}
	
	.login-form-input input::placeholder {
	    font-size: 14px;
	}
	
	.password-form-btn {
	    width: 100%;
	    background: #EC81A7;
	    height: 45px;
	    border-radius: 30px;
	    font-size: 15px;
	    font-weight: bold;
	    border: none;
	    color: white;
	    margin-top: 80px;
	}
	
	.password-form-btn i {
	    margin-right: 5px;
	    font-size: 16px;
	}
	.login-code-btn {
	    position: absolute;
	    border: none;
	    top: 0;
	    right: 0;
	    width: 120px;
	    padding: 0;
	    background: transparent;
	    color: #EC81A7;
		font-size: 14px;
		height: 100%;
		line-height: 80rpx;
	}
</style>